<template>
  <div class="calendar-cell">
    <div class="cell">
      <div class="day">{{ date.getDate() }}</div>
      <div class="icon-container">
        <div class="icon" v-if="isAlready">
          <el-icon v-if="schedule" style="color: #529b2e; font-size: 24px"><SuccessFilled /></el-icon>
          <el-icon v-else style="color: #b88230; font-size: 24px"><WarnTriangleFilled /></el-icon>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { SuccessFilled, WarnTriangleFilled } from '@element-plus/icons-vue'
import * as utils from '../../utils'
import { computed } from 'vue'
const props = defineProps({
  date: {
    type: Date,
    default: () => ({}),
  },
  timelogList: {
    type: Object as any,
    default: () => ({}),
  },
})

const schedule = computed(() => {
  const date = utils.formatDate(props.date, 'yyyy-MM-dd')
  return props.timelogList[date] !== undefined
})

const isAlready = computed(() => {
  props.date.setHours(0, 0, 0, 0) // 只比较日期部分
  const today = new Date()
  today.setHours(0, 0, 0, 0) // 只比较日期部分
  return props.date <= today
})
</script>
<style lang="scss" scoped>
.calendar-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  .day {
    font-size: 20px;
    font-weight: bold;
  }
  .icon-container {
    height: 30px;
  }
  .icon {
    display: flex;
  }
}
</style>
